{% extends 'base.html' %}

{% block title %}{{ question.title }} - 知疑{% endblock %}

{% block content %}
<div class="row">
    <!-- 主要内容区 -->
    <div class="col-md-8">
        <!-- 问题详情 -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="mb-0">{{ question.title }}</h4>
            </div>
            <div class="card-body">
                <div class="question-meta mb-3">
                    <div class="d-flex align-items-center">
                        <img src="{{ url_for('static', filename='img/' + question.author.avatar) }}" alt="{{ question.author.username }}" class="avatar-sm me-2">
                        <span class="me-3">
                            <a href="{{ url_for('user.profile', username=question.author.username) }}" class="text-decoration-none">
                                {{ question.author.username }}
                            </a>
                        </span>
                        <span class="text-muted">
                            发布于 {{ time_ago(question.create_time) }}
                        </span>
                    </div>
                </div>
                
                <div class="question-content mb-3">
                    {{ question.content|safe }}
                </div>
                
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        {% for tag in question.tags %}
                        <span class="tag">{{ tag.name }}</span>
                        {% endfor %}
                    </div>
                    
                    {% if current_user.is_authenticated and current_user.id == question.user_id %}
                    <div>
                        <a href="{{ url_for('question.edit', id=question.id) }}" class="btn btn-sm btn-outline-primary me-2">
                            <i class="fas fa-edit me-1"></i>编辑
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                            <i class="fas fa-trash-alt me-1"></i>删除
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="card-footer text-muted">
                <i class="fas fa-eye me-1"></i>{{ question.view_count }} 浏览
                <i class="fas fa-comment ms-3 me-1"></i>{{ question.answers.count() }} 回答
            </div>
        </div>
        
        <!-- 回答区域 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">{{ answers.total }} 个回答</h5>
            </div>
            <div class="list-group list-group-flush">
                {% for answer in answers.items %}
                <div class="list-group-item" id="answer-{{ answer.id }}">
                    <div class="answer-meta">
                        <div class="d-flex align-items-center">
                            <img src="{{ url_for('static', filename='img/' + answer.author.avatar) }}" alt="{{ answer.author.username }}" class="avatar-sm me-2">
                            <a href="{{ url_for('user.profile', username=answer.author.username) }}" class="text-decoration-none me-2">
                                {{ answer.author.username }}
                            </a>
                            <small class="text-muted">
                                回答于 {{ answer.create_time.strftime('%Y-%m-%d %H:%M') }}
                            </small>
                        </div>
                        
                        {% if current_user.is_authenticated %}
                        <form method="post" action="{{ url_for('question.like_answer', id=answer.id) }}" class="d-inline">
                            <button type="submit" class="like-btn {% if answer.is_liked_by(current_user) %}active{% endif %}">
                                <i class="fas fa-heart me-1"></i>
                                {{ answer.likes.count() }}
                            </button>
                        </form>
                        {% else %}
                        <div>
                            <i class="fas fa-heart me-1"></i>
                            {{ answer.likes.count() }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="my-3">
                        {{ answer.content|safe }}
                    </div>
                </div>
                {% else %}
                <div class="list-group-item text-center py-4">
                    <p class="text-muted mb-0">暂无回答，成为第一个回答的人吧！</p>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- 分页 -->
        {% if answers.pages > 1 %}
        <nav aria-label="Page navigation" class="mb-4">
            <ul class="pagination justify-content-center">
                {% for p in answers.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
                    {% if p %}
                        {% if p == answers.page %}
                        <li class="page-item active">
                            <span class="page-link">{{ p }}</span>
                        </li>
                        {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('question.detail', id=question.id, page=p) }}">{{ p }}</a>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
        {% endif %}
        
        <!-- 回答表单 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">你的回答</h5>
            </div>
            <div class="card-body">
                {% if current_user.is_authenticated %}
                <form method="post">
                    {{ form.hidden_tag() }}
                    
                    <div class="mb-3">
                        {% if form.content.errors %}
                            {{ form.content(class="form-control is-invalid", rows=6) }}
                            <div class="invalid-feedback">
                                {% for error in form.content.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.content(class="form-control", rows=6, placeholder="请输入你的回答...") }}
                        {% endif %}
                    </div>
                    
                    <div class="d-grid">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
                {% else %}
                <div class="text-center py-4">
                    <p class="mb-3">请登录后回答问题</p>
                    <a href="{{ url_for('auth.login', next=request.path) }}" class="btn btn-primary">登录</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 侧边栏 -->
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">发起人</h5>
            </div>
            <div class="card-body text-center">
                <img src="{{ url_for('static', filename='img/' + question.author.avatar) }}" class="avatar-lg mb-3" alt="{{ question.author.username }}">
                <h5>{{ question.author.username }}</h5>
                <p class="text-muted">加入于 {{ question.author.member_since.strftime('%Y-%m-%d') }}</p>
                <a href="{{ url_for('user.profile', username=question.author.username) }}" class="btn btn-outline-primary">查看资料</a>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">相关问题</h5>
            </div>
            <div class="list-group list-group-flush">
                {% for tag in question.tags %}
                    {% for related_question in tag.questions.limit(3) %}
                        {% if related_question.id != question.id %}
                        <a href="{{ url_for('question.detail', id=related_question.id) }}" class="list-group-item list-group-item-action">
                            {{ related_question.title }}
                        </a>
                        {% endif %}
                    {% endfor %}
                {% else %}
                <div class="list-group-item text-center py-3">
                    <p class="text-muted mb-0">暂无相关问题</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
{% if current_user.is_authenticated and current_user.id == question.user_id %}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除这个问题吗？此操作不可撤销。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form method="post" action="{{ url_for('question.delete', id=question.id) }}">
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %} 